
body {
    background-image: url('/static/images/bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (min-width: 768px) {
  .navbar {
    display: none; /* 在md及以上尺寸时隐藏 */
  }
}

/* 设置所有li元素的默认文本颜色为灰色 */
.navbar-nav li {
  color:rgba(128,128,128, 1);
}

/* 设置所有li元素在激活状态下的文本颜色为灰色 */
.navbar-nav li:active {
  color:rgba(128,128,128, 1);
}

/* 设置所有li元素在鼠标悬停时的文本颜色为灰色 */
.navbar-nav li:hover {
  color:rgba(128,128,128, 1);
}

/* 设置所有li元素在获得焦点时的文本颜色为灰色 */
.navbar-nav li:focus {
  color:rgba(128,128,128, 1);
}

/* 特别针对包含下拉菜单的li元素及其子元素 */
.navbar-nav .dropdown .dropdown-toggle,
.navbar-nav .dropdown .dropdown-toggle:active,
.navbar-nav .dropdown .dropdown-toggle:focus,
.navbar-nav .dropdown .dropdown-toggle:hover,
.navbar-nav .dropdown-menu,
.navbar-nav .dropdown-menu .dropdown-item,
.navbar-nav .dropdown-menu .dropdown-item:active,
.navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar-nav .dropdown-menu .dropdown-item:hover {
  color:rgba(128,128,128, 1);
}





/* 隐藏关闭擦侧边拦目关闭按钮使其美观 */
.btn-close {
    display: none;
}


/* 侧边栏基础样式 */
.offcanvas {

    background: rgba(0, 0, 0, 0.2); /* 黑色背景，透明度为0.2 */
    backdrop-filter: blur(5px); /* 毛玻璃效果 */
    border-radius: 0.25rem; /* 圆角边框 */
    transition: backdrop-filter 0.3s ease; /* 平滑过渡效果 */

    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%); /* 初始状态，侧边栏在屏幕外 */
    width: 60px !important; *//* 假设你想要将Offcanvas的宽度设置为60px 使用!important来确保覆盖Bootstrap的默认样式 *//*
}

/* 侧边栏显示状态 */
.offcanvas.show {
    transform: translateX(0); /* 侧边栏完全显示 */
}

/* 侧边栏隐藏动画 */
.offcanvas.hiding {
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%); /* 动画结束时，侧边栏回到屏幕外 */
}



/* 确保.offcanvas-body中的div填充整个区域，并使其子元素垂直居中 */
.offcanvas-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}

/* 图标容器样式 */
.offcanvas-body div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; /* 调整图标之间的间距 */
  flex-grow: 1; /* 使图标容器占据剩余空间 */
}

/* 退出按钮样式 */
.offcanvas-body button {
  width: 100%; /* 使按钮宽度占满整个容器 */
}


